<!-- 当前使用 -->
<template>
  <div>
    <PageTemplate>
      <div slot="content">
        <el-form
          inline
          :model="query"
          label-position="right"
          label-width="82px"
          class="search-collapse-pro-form"
        >
          <SearchCollapsePro>
            <div slot="title" class="search-collapse-pro-title">
              <el-form-item label-width="0px">
                <el-input v-model="query.task_des_com" :placeholder="$t('sys.process_processName')">
                  <el-button slot="append" icon="el-icon-search" @click="queryDataTableLike"></el-button>
                </el-input>
              </el-form-item>
            </div>
            <div slot="collapse">
              <!-- 高级搜索具体内容 -->
              <el-form-item :label="$t('sys.process_processName')">
                <el-input v-model="query.flow_name"></el-input>
              </el-form-item>
              <!-- 查询和重置按钮-->
              <el-row :gutter="10">
                <div class="btn-group-search">
                  <el-col :span="2">&nbsp;</el-col>
                  <el-col :span="6">
                    <el-button
                      type="primary"
                      class="btn-default"
                      @click="getAllDataTable"
                      size="small"
                    >{{$t('cm.query')}}</el-button>
                    <el-button
                      class="btn-second"
                      @click="queryReset('query')"
                      style="margin:0;"
                      size="small"
                    >{{$t('cm.reset')}}</el-button>
                  </el-col>
                </div>
              </el-row>
            </div>
          </SearchCollapsePro>
        </el-form>
        <el-row class="row-empty-10"></el-row>
        <PageTableCollapse :collapseStatus="true">
          <el-row slot="title">
            <el-col>
              <div>
                <el-button type="primary">
                  <i class="el-icon-edit"></i>
                  {{$t('cm.add')}}
                </el-button>
                <el-button type="primary">
                  <i class="el-icon-delete"></i>
                  {{$t('cm.delete')}}
                </el-button>
              </div>
            </el-col>
          </el-row>
          <el-table
            slot="content"
            class="table"
            border
            ref="multipleTable"
            :data="tables"
            tooltip-effect="dark"
            style="width: 100%"
            :show-overflow-tooltip="true"
            @selection-change="handleSelectionChange"
            :header-cell-style="{background:tableHeaderBGC}"
          >
            <el-table-column align="center" type="selection" width="60"></el-table-column>
            <el-table-column type="index" :label="$t('cm.no')" align="center" width="60"></el-table-column>
            <el-table-column
              prop="processName"
              :label="$t('sys.process_processName')"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="processType"
              :label="$t('sys.process_processType')"
              align="center"
            ></el-table-column>
            <el-table-column prop="processUrl" :label="$t('sys.process_processUrl')" align="center"></el-table-column>
            <el-table-column prop="orderIndex" :label="$t('sys.process_orderIndex')" align="center"></el-table-column>
            <el-table-column prop="isValid" :label="$t('sys.process_isValid')" align="center"></el-table-column>
            <el-table-column prop="remark" :label="$t('sys.process_remark')" align="center"></el-table-column>
            <el-table-column :label="$t('cm.operate')" align="center">
              <template slot-scope="scope">
                <ListBtn :options="btns" :row-data="scope.row" @triggerListBtn="handleListBtn"></ListBtn>
              </template>
            </el-table-column>
          </el-table>
          <div class="block pager-customer">
            <el-pagination
              background
              layout="total, slot, prev"
              :current-page.sync="pagingCurrentPageNum"
              :page-sizes="pagingPageSizes"
              :page-size="pagingPageSize"
              :total="pagingTotal"
              @size-change="pagingHandleSizeChange"
              @current-change="pagingHandleCurrentChange"
            >
              <el-button
                ref="firstPage"
                @click="firstPage"
                class="first-page"
                :disabled="firstPageDisabled"
              >{{$t('cm.firstPage')}}</el-button>
            </el-pagination>
            <el-pagination
              background
              layout="pager, next, slot, jumper"
              :current-page.sync="pagingCurrentPageNum"
              :page-sizes="pagingPageSizes"
              :page-size="pagingPageSize"
              :total="pagingTotal"
              @size-change="pagingHandleSizeChange"
              @current-change="pagingHandleCurrentChange"
            >
              <el-button
                ref="lastPage"
                @click="lastPage"
                class="last-pager"
                :disabled="lastPageDisabled"
              >{{$t('cm.lastPage')}}</el-button>
            </el-pagination>
          </div>
        </PageTableCollapse>
      </div>
    </PageTemplate>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import PageTemplate from '@/components/common/PageTemplate'
import SearchCollapsePro from '@/components/common/SearchCollapsePro'
import PageTableCollapse from '@/components/common/PageTableCollapse'
import ListBtn from '@/components/btn/ListBtn'
import { ALERT } from '@/utils/responseHandle'
import * as Constant from '@/utils/constant'
import { COMMON } from '@/utils/commonUtil'
import Pagination from '@/mixins/Pagination'
import service from '@/api/service'
export default {
  components: {
    PageTemplate, SearchCollapsePro, PageTableCollapse, ListBtn
  },
  mixins: [Pagination],
  data () {
    return {
      query: {
        task_des_com: null,
        flow_name: null
      },
      tables: [],
      btns: [
        {
          value: 'edit',
          label: 'cm.edit'
        },
        {
          value: 'del',
          label: 'cm.delete'
        }
      ]
    }
  },
  methods: {
    //重置操作
    queryReset (formName) {
      this.$refs[formName].resetFields()
    },
    queryDataTableLike () { // 高级
    },
    //关于翻页操作的都在下面的方法中，所有的可以copy这里的方法过去.
    getAllDataTable () { // 普通
      this.queryTableList({
        ...this.query,
        t: Math.random(),
        pageNum: this.pagingCurrentPageNum,
        pageSize: this.pagingPageSize
      })
    },
    //统一与后台操作的方法
    queryTableList (params) {
      //这里的params是对象
      //注意 如果后台json转对象 时间类型好像会抛异常  转到后台 前台用 qs 来转换数据 设置一个全局拦截器 main.js 参考
      let _this = this
      let tables = []
      let totalCount = 0
      service.getDoneTaskList(params, result => {
        if (result.status === Constant.RESP_STATE_SUCCESS && result.data.code === Constant.RT_SUCCESS) {
          let data = result.data.data.data
          //表格数据  数组            
          tables = data.resultData
          //分页数据
          totalCount = data.page.totalCount
        } else {
          // _this.$t('cm.tips')
          ALERT.error(result.data.msg)
        }
        _this.setPagingTotal(totalCount)
        this.tables = tables
      })
    },
    formatTableText (row, column, cellValue, index) {
      var fmtValue = null
      return fmtValue !== null && fmtValue !== undefined ? fmtValue : cellValue
    }
  },
  mounted () {
  },
  computed: {
    ...mapState({
      tableHeaderBGC: state => state.common.tableHeaderBGC
    })
  }
}
</script>

<style lang="scss">
</style>
